<template>
    <div id="classify" class="classify">
    	<common-header></common-header>
        <div class="classify_con">
            <div class="classify_left" ref="classify_item_scroll">
                <div class="classify_menu">
                    <div class="classify_item border-bottom" :class="{'current':currentIndex===index}" v-for="(item,index) of classify_menu" :key="index" @click="selectMenu(index)">{{item.name}}</div>
                </div>
            </div>
            <div class="classify_right" ref="classify_scroll">
                <div>
                    <div class="classify_content_item" v-for="(item,index) of classify_item" :key="index">
                    <div class="classify_content_title">{{item.title}}</div>
                    <ul class="classify_content_list">
                        <li v-for="(items,index) of item.items">
                            <img :src="items.imgUrl" alt="">
                            <p>洁面</p>
                        </li>
                    </ul>
                </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Bscroll from 'better-scroll'
import CommonHeader from '@/common/Header.vue'
export default {
    name: 'Classify',
    data(){
        return {
            classify_menu:[{name:"美妆个护"},{name:"母婴用品"},{name:"家居生活"},{name:"营养保健"},{name:"国际轻奢"},{name:"服饰"}],
            listHeight:[],
            scrollY:0,
            //currentIndex:0,
            classify_item:[{title:"基础护肤",items:[{desc:"洁面",imgUrl:"http://img.tepin.hk/HWG-DE/prt/5/7/m/1470365053609128.jpg"},{desc:"乳液/面霜",imgUrl:"http://img.tepin.hk/HWG-DE/prt/d/z/7/1470365076906526.jpg"},{desc:"面部精华",imgUrl:"http://img.tepin.hk/HWG-DE/prt/l/m/d/1470365092530388.jpg"},{desc:"眼部护理",imgUrl:"http://img.tepin.hk/HWG-DE/prt/c/a/e/1470365111502955.jpg"},{desc:"防晒修复",imgUrl:"http://img.tepin.hk/HWG-DE/prt/t/3/j/1470365125995293.jpg"},{desc:"唇部护理",imgUrl:"http://img.tepin.hk/HWG-DE/prt/k/2/l/1470365138563896.jpg"},{desc:"护肤套装",imgUrl:"http://img.tepin.hk/HWG-DE/prt/2/r/5/1470365155612506.jpg"},{desc:"面部护理",imgUrl:"http://img.tepin.hk/HWG-DE/prt/l/9/9/1470365488110293.jpg"},{desc:"面膜",imgUrl:"http://img.tepin.hk/HWG-DE/prt/4/e/x/1470365181699260.jpg"},{desc:"卸妆",imgUrl:"http://img.tepin.hk/HWG-DE/prt/2/u/x/1470365354525334.jpg"}]},{title:"母婴用品",items:[{desc:"乳液/面霜",imgUrl:"http://img.tepin.hk/HWG-DE/prt/d/z/7/1470365076906526.jpg"},{desc:"面部精华",imgUrl:"http://img.tepin.hk/HWG-DE/prt/l/m/d/1470365092530388.jpg"},{desc:"眼部护理",imgUrl:"http://img.tepin.hk/HWG-DE/prt/c/a/e/1470365111502955.jpg"},{desc:"防晒修复",imgUrl:"http://img.tepin.hk/HWG-DE/prt/t/3/j/1470365125995293.jpg"},{desc:"唇部护理",imgUrl:"http://img.tepin.hk/HWG-DE/prt/k/2/l/1470365138563896.jpg"},{desc:"护肤套装",imgUrl:"http://img.tepin.hk/HWG-DE/prt/2/r/5/1470365155612506.jpg"},{desc:"面部护理",imgUrl:"http://img.tepin.hk/HWG-DE/prt/l/9/9/1470365488110293.jpg"},{desc:"面膜",imgUrl:"http://img.tepin.hk/HWG-DE/prt/4/e/x/1470365181699260.jpg"},{desc:"卸妆",imgUrl:"http://img.tepin.hk/HWG-DE/prt/2/u/x/1470365354525334.jpg"}]},{title:"家居生活",items:[{desc:"面部精华",imgUrl:"http://img.tepin.hk/HWG-DE/prt/l/m/d/1470365092530388.jpg"},{desc:"眼部护理",imgUrl:"http://img.tepin.hk/HWG-DE/prt/c/a/e/1470365111502955.jpg"},{desc:"防晒修复",imgUrl:"http://img.tepin.hk/HWG-DE/prt/t/3/j/1470365125995293.jpg"},{desc:"唇部护理",imgUrl:"http://img.tepin.hk/HWG-DE/prt/k/2/l/1470365138563896.jpg"},{desc:"护肤套装",imgUrl:"http://img.tepin.hk/HWG-DE/prt/2/r/5/1470365155612506.jpg"},{desc:"面部护理",imgUrl:"http://img.tepin.hk/HWG-DE/prt/l/9/9/1470365488110293.jpg"},{desc:"面膜",imgUrl:"http://img.tepin.hk/HWG-DE/prt/4/e/x/1470365181699260.jpg"},{desc:"卸妆",imgUrl:"http://img.tepin.hk/HWG-DE/prt/2/u/x/1470365354525334.jpg"}]},{title:"营养保健",items:[{desc:"洁面",imgUrl:"http://img.tepin.hk/HWG-DE/prt/5/7/m/1470365053609128.jpg"},{desc:"乳液/面霜",imgUrl:"http://img.tepin.hk/HWG-DE/prt/d/z/7/1470365076906526.jpg"},{desc:"面部精华",imgUrl:"http://img.tepin.hk/HWG-DE/prt/l/m/d/1470365092530388.jpg"},{desc:"眼部护理",imgUrl:"http://img.tepin.hk/HWG-DE/prt/c/a/e/1470365111502955.jpg"},{desc:"防晒修复",imgUrl:"http://img.tepin.hk/HWG-DE/prt/t/3/j/1470365125995293.jpg"},{desc:"唇部护理",imgUrl:"http://img.tepin.hk/HWG-DE/prt/k/2/l/1470365138563896.jpg"},{desc:"护肤套装",imgUrl:"http://img.tepin.hk/HWG-DE/prt/2/r/5/1470365155612506.jpg"},{desc:"面部护理",imgUrl:"http://img.tepin.hk/HWG-DE/prt/l/9/9/1470365488110293.jpg"},{desc:"面膜",imgUrl:"http://img.tepin.hk/HWG-DE/prt/4/e/x/1470365181699260.jpg"},{desc:"卸妆",imgUrl:"http://img.tepin.hk/HWG-DE/prt/2/u/x/1470365354525334.jpg"}]},{title:"国际轻奢",items:[{desc:"乳液/面霜",imgUrl:"http://img.tepin.hk/HWG-DE/prt/d/z/7/1470365076906526.jpg"},{desc:"面部精华",imgUrl:"http://img.tepin.hk/HWG-DE/prt/l/m/d/1470365092530388.jpg"},{desc:"眼部护理",imgUrl:"http://img.tepin.hk/HWG-DE/prt/c/a/e/1470365111502955.jpg"},{desc:"防晒修复",imgUrl:"http://img.tepin.hk/HWG-DE/prt/t/3/j/1470365125995293.jpg"},{desc:"唇部护理",imgUrl:"http://img.tepin.hk/HWG-DE/prt/k/2/l/1470365138563896.jpg"},{desc:"护肤套装",imgUrl:"http://img.tepin.hk/HWG-DE/prt/2/r/5/1470365155612506.jpg"},{desc:"面部护理",imgUrl:"http://img.tepin.hk/HWG-DE/prt/l/9/9/1470365488110293.jpg"},{desc:"面膜",imgUrl:"http://img.tepin.hk/HWG-DE/prt/4/e/x/1470365181699260.jpg"},{desc:"卸妆",imgUrl:"http://img.tepin.hk/HWG-DE/prt/2/u/x/1470365354525334.jpg"}]},{title:"服饰",items:[{desc:"洁面",imgUrl:"http://img.tepin.hk/HWG-DE/prt/5/7/m/1470365053609128.jpg"},{desc:"乳液/面霜",imgUrl:"http://img.tepin.hk/HWG-DE/prt/d/z/7/1470365076906526.jpg"},{desc:"面部精华",imgUrl:"http://img.tepin.hk/HWG-DE/prt/l/m/d/1470365092530388.jpg"},{desc:"眼部护理",imgUrl:"http://img.tepin.hk/HWG-DE/prt/c/a/e/1470365111502955.jpg"},{desc:"防晒修复",imgUrl:"http://img.tepin.hk/HWG-DE/prt/t/3/j/1470365125995293.jpg"},{desc:"唇部护理",imgUrl:"http://img.tepin.hk/HWG-DE/prt/k/2/l/1470365138563896.jpg"},{desc:"护肤套装",imgUrl:"http://img.tepin.hk/HWG-DE/prt/2/r/5/1470365155612506.jpg"},{desc:"面部护理",imgUrl:"http://img.tepin.hk/HWG-DE/prt/l/9/9/1470365488110293.jpg"},{desc:"面膜",imgUrl:"http://img.tepin.hk/HWG-DE/prt/4/e/x/1470365181699260.jpg"},{desc:"卸妆",imgUrl:"http://img.tepin.hk/HWG-DE/prt/2/u/x/1470365354525334.jpg"},{desc:"护肤套装",imgUrl:"http://img.tepin.hk/HWG-DE/prt/2/r/5/1470365155612506.jpg"},{desc:"面部护理",imgUrl:"http://img.tepin.hk/HWG-DE/prt/l/9/9/1470365488110293.jpg"},{desc:"面膜",imgUrl:"http://img.tepin.hk/HWG-DE/prt/4/e/x/1470365181699260.jpg"},{desc:"卸妆",imgUrl:"http://img.tepin.hk/HWG-DE/prt/2/u/x/1470365354525334.jpg"},{desc:"护肤套装",imgUrl:"http://img.tepin.hk/HWG-DE/prt/2/r/5/1470365155612506.jpg"},{desc:"面部护理",imgUrl:"http://img.tepin.hk/HWG-DE/prt/l/9/9/1470365488110293.jpg"},{desc:"面膜",imgUrl:"http://img.tepin.hk/HWG-DE/prt/4/e/x/1470365181699260.jpg"},{desc:"卸妆",imgUrl:"http://img.tepin.hk/HWG-DE/prt/2/u/x/1470365354525334.jpg"},{desc:"护肤套装",imgUrl:"http://img.tepin.hk/HWG-DE/prt/2/r/5/1470365155612506.jpg"},{desc:"面部护理",imgUrl:"http://img.tepin.hk/HWG-DE/prt/l/9/9/1470365488110293.jpg"},{desc:"面膜",imgUrl:"http://img.tepin.hk/HWG-DE/prt/4/e/x/1470365181699260.jpg"},{desc:"卸妆",imgUrl:"http://img.tepin.hk/HWG-DE/prt/2/u/x/1470365354525334.jpg"},{desc:"护肤套装",imgUrl:"http://img.tepin.hk/HWG-DE/prt/2/r/5/1470365155612506.jpg"},{desc:"面部护理",imgUrl:"http://img.tepin.hk/HWG-DE/prt/l/9/9/1470365488110293.jpg"},{desc:"面膜",imgUrl:"http://img.tepin.hk/HWG-DE/prt/4/e/x/1470365181699260.jpg"},{desc:"卸妆",imgUrl:"http://img.tepin.hk/HWG-DE/prt/2/u/x/1470365354525334.jpg"}]}],
        }
    },
    components:{
        CommonHeader
    },
    props:{
        swiperList:Array,
        icon_img:String,
        icon_list:Array,
        coupon_list:Array,
        seckill_link:String,
        seckill_list:Array,
        seckill_tit:String,
        goods_list1_data:Array,
        goods_list1_img:String,
        goods_list1_2_data:Array,
        goods_list1_2_img:String,
        goods_list2_data:Array,
        goods_list2_title:String
    },
    mounted(){
        this.classifyScroll=new Bscroll(this.$refs.classify_scroll,{
            probeType:3,
            click:true
        })  
        this.classifyScroll.on('scroll',(pos)=>{
            this.scrollY=Math.abs(Math.round(pos.y));
            this._calculateHeight();
        })
    },
  methods:{
    _calculateHeight(){
        let classifyList=this.$refs.classify_scroll.getElementsByClassName('classify_content_item');
        let height=0;
        this.listHeight.push(height);
        for(let i=0;i<classifyList.length;i++){
            let item=classifyList[i]
            height+=item.clientHeight;
            this.listHeight.push(height);
        }
    },
    selectMenu(index){
        //this.currentIndex=index
        let classifyList=this.$refs.classify_scroll.getElementsByClassName('classify_content_item');
        let el=classifyList[index];
        this.classifyScroll.scrollToElement(el,300);
    }
  },
  computed:{
    currentIndex(){
        for(let i=0;i<this.listHeight.length;i++){
            let height1=this.listHeight[i];
            let height2=this.listHeight[i+1];
            if(!height2||(this.scrollY>=height1&&this.scrollY<height2)){
                return i;
            }   
        }
        return 0;
    }
  }
}

</script>

<style lang="stylus" scoped>
.classify_con{width:100%;overflow:hidden;position:absolute;left:0;right:0;top:45px;bottom:50px;display:flex;}
.classify_left{width:80px;background:#f3f5f7;}
.classify_item{display:table;height:44px;width:56px;line-height:44px;padding:0 12px;font-size: 13px;text-align: center;}
.current{background:#fff;font-weight:700;position:relative;margin-top:-1px;z-index:10;}

.classify_right{flex:1;}
.classify_content_item{width:100%;overflow: hidden;}
.classify_content_title{padding-left: 14px;height:26px;line-height:26px;border-left: 2px solid #d9dde1;font-size: 12px;color: #93999f;background: #f3f5f7;}
.classify_content_item:nth-child(1) .classify_content_title{margin-top:0;}
.classify_content_list{width:100%;display: flex;display: -webkit-box;display: -webkit-flex;flex-wrap: wrap;padding-bottom: 10px;}
.classify_content_list li{-webkit-box-flex:0 0 33.3333%;-webkit-flex:0 0 33.3333%;flex:0 0 33.3333%;margin-top:10px;}
.classify_content_list li img{height:60px;display: table;margin:0 auto;}
.classify_content_list li p{text-align: center;font-size:12px;color:#333;padding-top:5px;}

</style>